<template>
	<div class="sellerRegist">
		<seller-tap>
			<span slot='font'>立淘注册</span>
			<a href="#/buller/self" class="fa fa-chevron-left" slot='a'></a>
		</seller-tap>
		<main>
			<div>
				<img src="/static/img/1.png" />
			</div>
			<form @submit="regist">
				<div><span>账号</span><input placeholder="3~10位" autocomplete="off" @input="input1" @focus="focus" autofocus="autofocus" type="text" name="uname" v-model.trim="uname" /><label><i  v-if="fei1" style="color: red;" class="invalid fa fa-info-circle"></i><i v-if="uname" @click="clear" class="fa fa-times-circle"></i></label></div>
				<div><span>密码</span><input placeholder="6~12位" @input="input2" @focus="focus" name="pwd" v-model.trim="pwd" type="password" /><label><i  v-if="fei2" style="color: red;" class="invalid fa fa-info-circle"></i><i v-if="pwd" @click="clear" class="fa fa-times-circle"></i><i @click="disview" class="fa fa-eye" v-if="isView && pwd"></i><i v-if="!isView && pwd" @click="view" class="fa fa-eye-slash"></i></label></div>

				<!--<div><span>手机</span><input @input="input3" type="text" autocomplete="off" v-model.trim="phone" @focus="focus" name="phone" /><label><i v-if="fei3" style="color: red;" class="invalid fa fa-info-circle"></i><i v-if="phone" @click="clear" class="fa fa-times-circle"></i></label></div>-->
				<div><span>邮箱</span><input @input="input4" type="text" autocomplete="off" v-model.trim="email" @focus="focus" name="email" /><label><i v-if="fei4" style="color: red;" class="invalid fa fa-info-circle"></i><i v-if="email" @click="clear" class="fa fa-times-circle"></i></label></div>

				<p class="success" style="display: none; padding: 5px 10px; padding-right:35px;color: orangered;text-align: center;position: absolute;width: 100%;">{{success}}</p>

				<button :class="{dis:isOk}">注册</button>
			</form>
			<div class="foot">
				已有账号？
				<a href="#/buller/login">快去登录吧</a>
			</div>
		</main>
	</div>
</template>

<script>
	import $ from 'jquery'
	import axios from 'axios'

	import SellerTap from '../components/SellerTap'
	export default {
		data: function() {
			return {
				uname: '',
				pwd: '',
				//				phone:'',
				email: '',
				isOk: true,
				fei1: true,
				fei2: true,
				//				fei3:true,
				fei4: true,
				isView: false,
				success: ''

			}
		},
		components: {
			SellerTap
		},
		methods: {
			regist: function(ev) {
				ev.preventDefault();

				if($('button').attr('class') == 'dis') {
					this.success = '请填写信息';
					$('.success').fadeIn();

					setTimeout(function() {
						$('.success').fadeOut(function() {

						});
					}, 200);

					return;
				}

				var data = {
					uname: this.uname,
					pwd: this.pwd,
					email: this.email

				}
				console.log(data)
				axios.post('/buller/regist', data).then(function(result) {
					console.log(result.data);
					if(result.data == 'success') {
						location.href = '#/buller/login'
					}
				}).catch(function(err) {
					console.log(err);
				})

			},
			view: function(ev) {
				this.isView = !this.isView;
				$(ev.target).parent().siblings('input').attr('type', 'text');
			},
			disview: function(ev) {
				this.isView = !this.isView;
				$(ev.target).parent().siblings('input').attr('type', 'password');
			},

			clear: function(ev) {
				var name = $(ev.target).parent().siblings('input').attr('name');
				this[name] = '';
				$('form button').attr('type', 'button')
				this.isOk = true;
			},

			focus: function(ev) {

				$(ev.currentTarget).siblings('label').children().each(function(ins, item) {
					$(this).css('display', 'inline');
				})
				$(ev.currentTarget).parent().siblings().find('i').each(function() {
					$(this).css('display', 'none')
				})
			},
			pattern(val, patts, theData, ins) {
				$('label').eq(ins).children().each(function(ins, item) {
					$(this).css('display', 'inline');
				})
				if(!patts.test(val) || val == '') {
					this[theData] = true;
				} else {
					this[theData] = false;
				}

				if(this.fei1 || this.fei2 || this.isfei4) {
					$('form button').attr('type', 'button')
					this.isOk = true;
				} else {
					this.isOk = false;
					$('form button').attr('type', 'submit')
				}

			},
			input1() {
				var pat = /^[a-zA-Z0-9\-\.\+\*_ \u4e00-\u9fa5]{3,9}$/;
				this.pattern(this.uname, pat, 'fei1', 0);
			},
			input2() {

				var pat = /^[a-zA-Z0-9\-\.\+\*_\@\#\!\?\$]{6,12}$/;
				this.pattern(this.pwd, pat, 'fei2', 1)

			},
			//			input3(){
			//				var pat = /^\d{11}$/;
			//				this.pattern(this.phone,pat,'fei3',2);
			//				
			//				
			//			},
			input4() {
				var pat = /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
				this.pattern(this.email, pat, 'fei4', 3);

			},
		}
	}
</script>

<style scoped>
	main {
		padding: 10px;
		padding-top: 50px;
	}
	
	main img {
		display: block;
		width: 80px;
		margin: 0 auto;
		margin-bottom: 30px;
	}
	
	main form div {
		border-bottom: solid 1px #ddd;
		padding: 7px 0;
		line-height: 30px;
	}
	
	main form div span {
		margin-right: 10%;
	}
	
	main form div input {
		width: 55%;
		line-height: 30px;
		border: none;
		margin-right: 10px;
		background: none;
	}
	
	main button {
		border: none;
		background: red;
		color: white;
		margin-top: 40px;
		line-height: 40px;
		width: 100%;
		font-size: 17px;
		cursor: pointer;
	}
	
	.fa-times-circle {
		color: #aaa;
	}
	
	.fa-eye-slash {
		color: #ccc;
	}
	
	form div i:first-child {
		display: none;
	}
	
	form i {
		margin-right: 7px;
		font-size: 17px;
	}
	
	.foot {
		margin-top: 50px;
		font-size: 13px;
	}
	
	.foot a {
		font-size: 16px;
		margin-left: 30px;
		color: orangered;
	}
	
	.dis {
		color: darkgray;
		background: #ddd;
	}
</style>